import axios from "axios";
import React, { useState, useEffect, useRef } from "react";
import { ListRowState } from "../../types";
import { ListItem } from "../../components";
import { useNavigate } from "react-router-dom";
import { List, Swiper } from "react-vant";
import "./style.scss";
import { throttle } from "../../utils/throttle";
const menuList = Array.from({ length: 10 })
  .fill("")
  .map((_, i) => {
    const index: number = i + 1;
    const ext = index === 1 || index === 3 || index === 4 ? "png" : "webp";
    return require(`../../assets/images-home/menu${index}.${ext}`);
  });
const Index: React.FC = () => {
  const [list, setList] = useState<ListRowState[]>([]);
  const [finishedText, setFinishedText] = useState("");
  const [finished, setFinished] = useState(false);
  const [pageCode, setPageCode] = useState(1);
  const navigate = useNavigate();
  const [tabIndex, setTabIndex] = useState(0);
  const [show, setShow] = useState(false);
  const main = useRef<HTMLElement | null>(null);
  const onScroll = throttle(() => {
    if (main.current) {
      setShow(main.current.scrollTop > 200);
    }
  }, 40);
  const fetchList = async () => {
    try {
      const resp = await axios.get("/api/list", { params: { pageCode } });
      const { code, data, message } = resp.data;
      if (code == 200) {
        setList([...list, ...data.data]);
        setPageCode(pageCode + 1);
      } else {
        setFinishedText(message);
        setFinished(true);
      }
    } catch {
      console.log("数据请求报错");
    }
  };

  return (
    <div className="home">
      <header>
        <div className="top">
          <img
            src={require("../../assets/images-home/logo.png")}
            alt=""
            className="logo"
          />
          <div className="search">
            <img
              src={require("../../assets/images-home/search.png")}
              alt=""
              className="search-img"
            />
            <input
              type="text"
              placeholder="搜搜商品名称"
              onFocus={() => navigate("/search")}
            />
          </div>
          <img
            src={require("../../assets/images-home/user.png")}
            alt=""
            className="user"
          />
        </div>
        <div className="nav">
          <div className="nav-title">
            <span
              className={tabIndex === 0 ? "active" : ""}
              onClick={() => setTabIndex(0)}
            >
              推荐
            </span>
            <span
              className={tabIndex === 1 ? "active" : ""}
              onClick={() => setTabIndex(1)}
            >
              智能
            </span>
            <span
              className={tabIndex === 2 ? "active" : ""}
              onClick={() => setTabIndex(2)}
            >
              电视
            </span>
            <span
              className={tabIndex === 3 ? "active" : ""}
              onClick={() => setTabIndex(3)}
            >
              家电
            </span>
            <span
              className={tabIndex === 4 ? "active" : ""}
              onClick={() => setTabIndex(4)}
            >
              笔记本
            </span>
          </div>
          <i className="iconfont icon-angle-down"></i>
        </div>
      </header>
      <main onScroll={(e) => onScroll(e)} ref={main}>
        <div id="top"></div>
        <div className={tabIndex === 0 ? "content active" : "content"}>
          {/* <!-- 轮播 --> */}
          <Swiper autoplay={3000} className="banner">
            <Swiper.Item>
              <img
                src={require("../../assets/images-home/banner1.jpg")}
                alt=""
              />
            </Swiper.Item>
            <Swiper.Item>
              <img
                src={require("../../assets/images-home/banner2.jpg")}
                alt=""
              />
            </Swiper.Item>
            <Swiper.Item>
              <img
                src={require("../../assets/images-home/banner3.jfif")}
                alt=""
              />
            </Swiper.Item>
            <Swiper.Item>
              <img
                src={require("../../assets/images-home/banner4.png")}
                alt=""
              />
            </Swiper.Item>
          </Swiper>
          {/* <!-- 导航菜单 --> */}
          <div className="menu">
            {menuList.map((v, i) => {
              return (
                <a href="#" key={i}>
                  <img src={v} alt="" />
                </a>
              );
            })}
          </div>
          {/* <!-- 导航图片 --> */}
          <div className="nav-img">
            <div className="left">
              <img src={require("../../assets/images-home/big.webp")} alt="" />
            </div>
            <div className="right">
              <img
                src={require("../../assets/images-home/litter.webp")}
                alt=""
              />
              <img
                src={require("../../assets/images-home/litter1.webp")}
                alt=""
              />
            </div>
          </div>

          {/* <!-- 推荐图片 --> */}
          <img src="./images/remmond.webp" alt="" className="recomm" />
          {/* 列表 */}
          <List
            onLoad={fetchList}
            finishedText={finishedText}
            finished={finished}
          >
            <div className="home-list">
              {list.map((v) => {
                return (
                  <dl
                    key={v.id}
                    onClick={() => navigate("/detail/" + v.id, { state: v })}
                  >
                    <dt>
                      <img src={v.image} alt="" />
                    </dt>
                    <dd>
                      <h4>{v.title}</h4>
                      <small>{v.word}</small>
                      <b>￥: {v.price}起</b>
                      <span>立即购买</span>
                    </dd>
                  </dl>
                );
              })}
            </div>
          </List>
        </div>
        <div className={tabIndex === 1 ? "content active" : "content"}>
          组件智能
        </div>
        <div className={tabIndex === 2 ? "content active" : "content"}>
          组件电视
        </div>
        <div className={tabIndex === 3 ? "content active" : "content"}>
          组件家电
        </div>
        <div className={tabIndex === 4 ? "content active" : "content"}>
          组件笔记本
        </div>
      </main>

      <img
        src={require("../../assets/images-home/new.png")}
        alt=""
        className="new"
      />
      <a
        href="#top"
        className="back-top"
        style={{ display: show ? "block" : "none" }}
      >
        <img src={require("../../assets/images-home/top.png")} alt="" />
      </a>
    </div>
  );
};

export default Index;
